<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
  <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
    <i-bs name="{{icon}}"></i-bs>
    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
    @if (!editing && selectionModel.totalCount > 0) {
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
    }
  </button>
  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
    <div class="list-group list-group-flush">
      @if (!editing && manyToOne) {
        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
            <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
            <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
          </div>
        </div>
      }
      @if (!editing && !manyToOne) {
        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
            <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
            <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
          </div>
        </div>
      }
      <div class="list-group-item">
        <div class="input-group input-group-sm">
          <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
        </div>
      </div>
      @if (selectionModel.items) {
        <div class="items" #buttonItems>
          @for (item of selectionModel.itemsSorted | filter: filterText:'name'; track item; let i = $index) {
            @if (allowSelectNone || item.id) {
              <pngx-toggleable-dropdown-button
                [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggled)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
              </pngx-toggleable-dropdown-button>
            }
          }
        </div>
      }
      @if (editing) {
        @if ((selectionModel.itemsSorted | filter: filterText:'name').length === 0 && createRef !== undefined) {
          <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
            <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
            <i-bs width="1.5em" height="1em" name="plus"></i-bs>
          </button>
        }
        @if ((selectionModel.itemsSorted | filter: filterText:'name').length > 0) {
          <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
            <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
            <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
          </button>
        }
      }
      @if (!editing && manyToOne) {
        <div class="list-group-item list-group-item-note pt-1 pb-2">
          <small i18n>Click again to exclude items.</small>
        </div>
      }
    </div>
  </div>
</div>
